<template>
    <!-- 顶部搜索框 -->
    <div class='headerSearchWrap'>
        <img class="logo" src="https://res.vmallres.com/portal/1.11.3.300/h5/images/logo_red.png">

        <!-- 搜索框按钮 -->
        <div class='searchBtn'>
            <svg class='magnifierLogo' width="16" height="16" viewBox="0 0 1024 1024">
                <path
                    d="M744.758 704.861l143.275 143.25c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-143.686-143.691c16.388-13.702 31.662-28.692 45.666-44.814zM442.667 85.333c197.35 0 357.333 159.984 357.333 357.333 0 88.502-32.174 169.489-85.464 231.903v0l-0.944 1.101c-2.851 3.312-5.762 6.571-8.731 9.776l9.674-10.877c-3.963 4.641-8.042 9.179-12.233 13.61-2.5 2.643-5.032 5.239-7.602 7.796-0.895 0.89-1.782 1.764-2.674 2.633-2.996 2.92-6.063 5.806-9.18 8.637-1.208 1.097-2.431 2.193-3.663 3.282-2.857 2.525-5.744 4.995-8.67 7.419-0.589 0.488-1.169 0.965-1.75 1.441-61.596 50.386-140.317 80.613-226.098 80.613-197.35 0-357.333-159.984-357.333-357.333s159.984-357.333 357.333-357.333zM442.667 149.333c-162.004 0-293.333 131.33-293.333 293.333s131.33 293.333 293.333 293.333c162.004 0 293.333-131.33 293.333-293.333s-131.33-293.333-293.333-293.333z"
                    fill="#000000" fill-opacity="0.6"></path>
            </svg>
            <p>无忧服务，华为手机牛b</p>
        </div>

        <svg class='accountLogo' width="24" height="24" viewBox="0 0 1024 1024">
            <path
                d="M661.333 128c176.731 0 320 143.269 320 320 0 174.964-140.418 317.131-314.708 319.957l-5.292 0.043h-72.085l-161.287 161.294c-11.997 11.997-31.15 12.477-43.719 1.44l-1.536-1.44c-11.997-11.997-12.477-31.15-1.44-43.719l1.44-1.536 170.667-170.667c5.501-5.501 12.799-8.792 20.514-9.303l2.113-0.070h85.333c141.385 0 256-114.615 256-256 0-139.971-112.334-253.705-251.767-255.966l-302.9-0.034c-141.385 0-256 114.615-256 256 0 139.971 112.334 253.705 251.767 255.966l4.233 0.034h32c17.673 0 32 14.327 32 32 0 17.042-13.322 30.972-30.12 31.946l-1.88 0.054h-32c-176.731 0-320-143.269-320-320 0-174.964 140.418-317.131 314.708-319.957l5.292-0.043h298.667zM298.667 394.667c29.455 0 53.333 23.878 53.333 53.333s-23.878 53.333-53.333 53.333c-29.455 0-53.333-23.878-53.333-53.333s23.878-53.333 53.333-53.333zM512 394.667c29.455 0 53.333 23.878 53.333 53.333s-23.878 53.333-53.333 53.333c-29.455 0-53.333-23.878-53.333-53.333s23.878-53.333 53.333-53.333zM725.333 394.667c29.455 0 53.333 23.878 53.333 53.333s-23.878 53.333-53.333 53.333c-29.455 0-53.333-23.878-53.333-53.333s23.878-53.333 53.333-53.333z"
                fill="#000000" fill-opacity="1"></path>
        </svg>

        <!-- 商城会员，登录图标 -->
        <img class='mallMember' src="https://res.vmallres.com/pimages/uomcdn/CN/cms/202111/F4EF91EB72D3D82F0CA772243C6A031E.png" />
    </div>
    <!-- 顶部搜索框，结束 -->

    <!-- 产品类别按钮，开始 -->
    <div class="goodsTypeBtn">
        <van-tabs v-model:active="goodsTypeVal">
            <van-tab v-for="n in goodsTypeDataObj.arr" :title="n.txt">
            </van-tab> 
        </van-tabs>
    </div>
    <!-- 产品类别按钮，结束 -->

    <!-- 轮播图，开始 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="n in swipeDataObj.arr">
            <img :src="n.imgUrl">
        </van-swipe-item>
    </van-swipe>
    <!-- 轮播图，结束 -->

    <!-- 宫格组件，可拖动的产品类型按钮，开始 -->
  <div class='goodsDragBtnList'>
    <!-- 只用于产生滚动的容器，其width为200%; -->
    <div style='width:200%;'>
        <van-grid :column-num="8">
            <van-grid-item v-for="n in gridGoodsObj.arr">
                <img :src="n.imgUrl" />
                <p>{{n.txt}}</p>
            </van-grid-item>
        </van-grid>
    </div>
  </div>
  <!-- 宫格组件，可拖动的产品类型按钮，结束 -->

  <!-- 限时购，开始 -->
  <div class='limitBuy'>
    <p class='title_1'>限时购</p>
    <em class='title_2'>好货限时抢</em>

    <!-- 倒计时组件：count-down，开始 -->
    <van-count-down class='countDownSty' :time="countDownTime">
        <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
        </template>
    </van-count-down>
    <!-- 倒计时组件：count-down，结束 -->

    <!-- 限时购，四个产品 -->
    <van-row class='limitGoodsSty'>
      <van-col span="6" v-for='n in limitGoodsObj.arr'>
        <img :src="n.imgUrl" />
        <p class='price_1'> {{n.price}} </p>
        <b class='price_2'> {{n.ol_price}} </b>
      </van-col>
    </van-row>

  </div>
  <!-- 限时购，结束 -->

    <!-- 广告位，开始 -->
    <div class='adSpace'>
        <img src="https://res.vmallres.com/uomcdn/CN/cms/202205/3AA4039F637FDCF25150E41F521ED9BD.gif" />
    </div>
    <!-- 广告位，结束 -->

    <!-- footer底部导航栏 -->
    <footerTabber />    
</template>
  
<script setup>
    import axios from 'axios'
    import { ref, reactive } from 'vue'
    import requestFn from '@/utils/https'
    import footerTabber from '@/components/footerTabber'
    
    const msg = ref('vmall 首页')
    const goodsTypeVal = ref(0)
    // footerBar的变红按钮重置
    localStorage.setItem('switchTabVal', 0)

    const goodsTypeDataObj = reactive({
        arr: []
    })

    const swipeDataObj = reactive({
        arr: []
    })

    const gridGoodsObj = reactive({
        arr: []
    })

    const limitGoodsObj = reactive({
        arr: []
    })

    // 产品类型按钮
    requestFn({
        url: '/goodsTypeData',
        method: 'get'
    }).then( res => {
        // console.log( res.data )
        goodsTypeDataObj.arr = res.data;
    })

    // 轮播图
    requestFn({
        url: '/swipeData',
        method: 'get'
    }).then( res => {
        // console.log( res.data )
        swipeDataObj.arr = res.data;
    })

    // 宫格组件，可拖动的产品类型按钮
    requestFn({
        url: '/gridGoodsData',
        method: 'get'
    }).then( res => {
        // console.log( res.data )
        gridGoodsObj.arr = res.data;
    })
    // 倒计时组件
    const countDownTime = ref(30 * 60 * 60 * 1000);

    // 限时购的四个商品
    requestFn({
        url: '/limitGoodsData',
        method: 'get'
    }).then( res => {
        // console.log( res.data )
        limitGoodsObj.arr = res.data;
    })

</script>

<style lang="less" scoped>
/* 顶部搜索框，开始 */
.headerSearchWrap {
    padding: 0 .5rem;
    position: relative;
    height: 1.6rem;
    .logo {
        position: absolute;
        left: .45rem;
        top: .5rem;
    }
    .searchBtn {
        position: absolute;
        top: .3rem;
        left: 2.7rem;
        width: 4.5rem;
        height: 40px;
        background: #c3c3c3;
        border-radius: .5rem;
        overflow: hidden;
        .magnifierLogo {
            position: absolute;
            left: .3rem;
            top: .3rem;
        }
        p {
            position: absolute;
            top: .3rem;
            left: .9rem;
            font-size: .3rem;
        }
    }
    .mallMember {
        position: absolute;
        right: .5rem;
        top: .5rem;
        width: .6rem;
        height: .6rem;
        display: block;
    }
    .accountLogo {
        position: absolute;
        top: .5rem;
        right: 1.7rem;
        width: .6rem;
        height: .6rem;
    }
}
/* 顶部搜索框，结束 */

/* 产品类别按钮，开始 */
.goodsTypeBtn ::v-deep .van-tab {
    background: #c3c3c3;
    margin-right: 8px;
    height: 30px;
    border-radius: 20px;
}
.goodsTypeBtn ::v-deep .van-tabs__line{
    display: none;
}
/* 产品类别按钮，结束 */

/*轮播图，开始*/
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
/* 轮播图，结束 */

/* 宫格组件，可拖动的产品类型按钮，开始 */
.goodsDragBtnList{
    overflow-x: scroll;
}
/*
  ::-webkit-scrollbar，
  它一般在不同的浏览器，有不同的写法
  它有兼容性的问题
*/
.goodsDragBtnList::-webkit-scrollbar{
    display: none;
}

.goodsDragBtnList {
    img {
        width: 48px;
        height: 48px;
    }
}
/* 宫格组件，可拖动的产品类型按钮，结束 */

/* 限时购，开始 */
.limitBuy {
    background: #f1f3f5;
    position: relative;
    height: 164px;
    border-radius: 20px;
    margin: 0 12px;
    overflow: hidden;
    .title_1{
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        left: 15px;
        top: 15px;
    }
    .title_2{
        position: absolute;
        top: 17px;
        left: 72px;
        font-size: 12px;
        background-color: rgba(237, 111, 33, 0.1)
    }
    .countDownSty {
        position: absolute;
        top: 15px;
        right: 30px;
        .colon {
            display: inline-block;
            margin: 0 4px;
            color: #ee0a24;
        }

        .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #ee0a24;
        }
    }
    .limitGoodsSty {
        margin-top: 50px;
        img {
            width: 58px;
            height: 58px;
        }
        .price_1 {
            color: #f00;
            font-weight: bold;
        }
        .price_2 {
            color: #666;
            font-weight: normal;
            text-decoration-line: line-through;
        }
    }
}
/* 限时购，结束 */

/* 广告位 */
.adSpace {
    margin: 16px;
    overflow: hidden;
    border-radius: 20px;
}
</style>
  